<template>
	<w-container id='order-submit' class='pa-16' :loading="loading">
		<w-navbar navType="default"  id="my-nav" title="确认订单"></w-navbar>
		<view class="bg-color-item flex pa-8 br-8 mb-16">
			<w-image radius="8" :src="product.listimg" width="83" height="83"></w-image>
			<view class="flex-1 plr-16 ptb-4 flex-dir-col flex"
				:class="orderBaseInfo.order_type==1?  'flex-js-sb':'flex-js-center'">
				<text class="font-color-textPrimary text-overflow-2">{{product.name &&handleLang(product.name)}}</text>
				<view class="font-color-minor flex-js-end flex" v-if="orderBaseInfo.order_type==1">
					<view class="flex flex-ai-center">
						<w-icon :name="orderBaseInfo.count<=1? 'minus-disable':'minus-active'" size="18" @click='minus'>
						</w-icon>
						<input v-model="orderBaseInfo.count" type="number" @input="changeCount"
							class="plr-4 font-color-textPrimary" style="width: 80rpx;text-align: center;" />
						<w-icon :name="orderBaseInfo.count==orderBaseInfo.maxCount? 'add-disable':'add-active'"
							size="18" @click='add'></w-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="br-8 bg-color-item pa-8 mb-8">
			<view class="flex flex-js-sb font-size-14 mb-16"
				v-if="product.publisher&&product.publisher.user&&product.publisher.user.nickname">
				<text class="font-color-999">{{handleLang('创作者:')}}</text>
				<text class="font-color-textPrimary">{{product.publisher.user.nickname}}</text>
			</view>
			<view class="flex flex-js-sb font-size-14 mb-16" v-if="orderBaseInfo.order_type==1">
				<text class="font-color-999">{{handleLang('藏品编号:')}}</text>
				<text class="font-color-textPrimary">{{handleLang('随机编号')}}</text>
			</view>
			<view class="flex flex-js-sb font-size-14 mb-16 flex-ai-center" v-if="userInfo.ntf_url">
				<text class="font-color-999">{{handleLang('区块链地址:')}}</text>
				<text class="font-color-textPrimary flex-1 text-right">{{userInfo.ntf_url|hideUrl}}</text>
				<!-- <w-icon name="copy-dark" @click='copy'></w-icon> -->
			</view>
			<view class="flex flex-js-sb font-size-14  flex-ai-center">
				<text class="font-color-999">{{handleLang('订单金额:')}}</text>
				<view class="" v-if="orderType==1&&orderBaseInfo.count>1">
					<text class="font-size-10 font-color-textPrimary">￥{{product.price}}x{{orderBaseInfo.count}}=</text>
					<text class="font-color-textPrimary">{{totalPrice}}</text>
				</view>
				<view class="font-color-textPrimary font-w-500 font-size-16"
					style="font-family: PingFang SC-Medium, PingFang SC;" v-else>
					￥{{totalPrice}}
				</view>
			</view>
		</view>
		<PayType class='mt-16' v-model="payInfo" :order='orderBaseInfo'></PayType>

		<view class="action bg-color-white">
			<view class="btns flex flex-ai-center plr-16 flex-js-sb">
				<view class="font-color-price font-w-600">
					<text class="font-size-16">￥</text>
					<text class="font-size-24">{{totalPrice}}</text>
				</view>
				<w-button style='width: 444rpx;' :disabled="disable" @click='checkCaptcha'>立即支付</w-button>
			</view>
		</view>

		<w-jy-verify ref="captcha" v-if="captchaStatus" @success='createOrder'></w-jy-verify>
	</w-container>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	import PayType from './components/payType.vue'
	import {
		getOrderDetails,
		createOrder,
		createMarketOrder,
		doPay
	} from '@/api/order/index.js'
	import PayUtil from '@/utils/payUtil.js'
	import {
		openHuiFu,
		CreateHuifuAccountOrder
	} from '@/api/wallet/index.js'
	import order from '../../store/modules/order'
	export default {
		components: {
			PayType
		},
		data() {
			return {
				payInfo: {
					pay_way: null,
					pay_type: null
				},
				order: {
					product: {}
				},
				orderBaseInfo: {
					product: {}
				},
				orderId: null,
				loading: false,
				timer: null,
			};
		},
		filters: {
			hideUrl(v) {
				if (!v) return;
				return v.slice(0, 5) + '****' + v.slice(v.length - 5, v.length)
			}
		},
		computed: {
			disable() {
				return false
				let able = this.payInfo.pay_type && this.userInfo.real_name_authentication && this.orderBaseInfo.count <=
					this.orderBaseInfo
					.maxCount
				return !able
			},
			product() {
				return this.orderBaseInfo.product || {}
			},
			totalPrice() {
				if (this.orderBaseInfo.is_group_buy == 1) {
					return this.truncateToTwoDecimalPlacesCeil((Number(this.product.price) / Number(this.product
						.part_number)))
				}
				return (this.product.price * this.orderBaseInfo.count).toFixed(2)
			},
			orderType() {
				return this.orderBaseInfo.order_type
			},
			...mapState('config', {
				captchaStatus(state) {
					return !!Number(state.info.normal_check)

				}
			})
		},
		onLoad() {
			this.orderBaseInfo = uni.getStorageSync('confirmOrder');
		},
		onHide() {
			uni.$emit('hideCert')
		},
		onShow() {
			this.loading = true;
			this.getUserInfo().finally(() => {
				if (!this.userInfo.real_name_authentication) {
					uni.$emit('showCert')
				}
				this.loading = false
			})
		},
		methods: {
			...mapActions('user', ['getUserInfo']),
			truncateToTwoDecimalPlacesCeil(num) {
				return Math.floor(num * 100) / 100;
			},
			checkCaptcha() {
				if (this.captchaStatus && this.orderType == 2) {
					this.$refs.captcha.showCaptcha();
				} else {
					this.createOrder()
				}
			},
			minus() {
				if (this.orderBaseInfo.count <= 1) return;
				this.orderBaseInfo.count--
			},
			add() {
				if (this.orderBaseInfo.count == this.orderBaseInfo.maxCount) return;
				this.orderBaseInfo.count++
			},
			changeCount({
				detail
			}) {
				let value = Number(detail.value)
				if (this.timer) clearTimeout(this.timer);
				this.timer = setTimeout(() => {
					this.orderBaseInfo.count = value
					if (value < 1) {
						this.orderBaseInfo.count = 1
					}
					if (value > this.orderBaseInfo.maxCount) {
						this.orderBaseInfo.count = this.orderBaseInfo.maxCount;
					}
				}, 500)
			},
			copy() {
				this.$tools.copyText(this.userInfo.ntf_url)
			},
			createOrder(validate) {
				uni.showLoading({
					title: "订单创建中"
				})
				if (this.orderType == 1) {
					this.createDefaultOrder()
				} else {
					this.createMarketOrder(validate)
				}
			},
			createDefaultOrder() {
				createOrder({
					goods_type: this.product.goods_type,
					goods_id: this.product.id,
					num: this.orderBaseInfo.count,
					pay_type: this.payInfo.pay_type,
					pay_way: this.payInfo.pay_way,
					batch_id: this.product.goods_type != 1 ? this.product.batch.id : '',
					price: 1
				}).then(res => {
					this.pay({
						pay_type: this.payInfo.pay_type,
						order_type: 1,
						pay_way: this.payInfo.pay_way,
						order_number: res.data.order_sn,
						order_id: res.data.order_id
					})
				})
			},
			createMarketOrder(validate) {
				createMarketOrder({
					market_goods_id: this.orderBaseInfo.market_goods_id,
					pay_type: this.payInfo.pay_type,
					pay_way: this.payInfo.pay_way,
					is_group_buy: this.orderBaseInfo.is_group_buy,
					group_buy_code: this.orderBaseInfo.group_buy_code,
					...validate
				}).then(res => {
					this.pay({
						order_id: res.data.order_id,
						pay_type: this.payInfo.pay_type,
						pay_way: this.payInfo.pay_way,
						order_type: 2,
						order_number: res.data.order_sn
					})
				})
			},

			pay({
				pay_type,
				order_type,
				order_number,
				order_id,
				pay_way
			}) {
				// return
				new PayUtil({
					pay_type,
					order_number,
					order_type,
					pay_way,
					order_id
				});
			}
		},

	}
</script>

<style lang="scss">
	#order-submit {

		.action {
			position: fixed;
			width: 750rpx;
			left: 0;
			bottom: 0;
			padding-bottom: env(safe-area-inset-bottom);

			.btns {
				width: 750rpx;
				height: 120rpx;
			}

			.price {
				font-family: HarmonyOS Sans SC-Medium, HarmonyOS Sans SC;
				font-weight: 500;
			}
		}
	}
</style>